<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <title>头像查看</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .head-bigger-to-view{
            position: absolute;
            display: inline-block;
            width: 400px;
            height: 400px;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border: 5px solid #fff;
            background-position: center;
            background-repeat: no-repeat;
            background-color: #4e65c7;
            border-radius: 5px;
            background-size: 100% 100%;
            box-shadow: 0 0 10px #666;
            z-index: 20;
            animation: start_head_bigger_to_view 0.5s ease-in-out;
            animation-fill-mode: forwards;
            cursor: url('http://localhost:8080/nchkkjxy/pic/cursor_style/love.cur'),auto;
        }
        .head-bigger-to-view .close{
            display: flex;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            border: 2px solid #fff;
            color: #c7254e;
            background: #fff;
            cursor: pointer;
        }
        .head-bigger-to-view .close:hover{
            transition: all 0.8s;
            animation: rolateClose 1s ease-in;
            animation-fill-mode: forwards;
            color: #fff;
            background: #c7254e;
        }
        .head-bigger-to-view .close span{
            display: flex;
            width: 100%;
            height: 100%;
            text-align: center;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        @keyframes start_head_bigger_to_view {
            from{width: 0;height: 0;top:0;}
            to{width: 400px;height: 400px;top: 50%;}
        }
        @keyframes rolateClose {
            form{}
            50%{transform: rotate(360deg);}
            to{transform: rotate(-360deg);}
        }
    </style>
</head>
<body>

<!--    <div class="head-bigger-to-view"><div class="close"><span>*</span></div></div>-->
    <input type="button" id="showIcon" onclick="head_bigger_to_view.show('body','http://localhost:8080/nchkkjxy/pic/head_icon/defult_man.png');" value="查看头像">
    <script>
        var head_bigger_to_view = {
            show : function (elem,url) {
                let _html = "<div class='head-bigger-to-view'><div class='close'></div></div>";
                $(elem).append(_html);
                $($(elem).find(".head-bigger-to-view")).css("background-image","url('"+url+"'");
                $($(elem).find(".head-bigger-to-view .close")[0]).click(function () {
                    $(this).parent(".head-bigger-to-view").remove();
                });
                $(document).mousedown(function(e){
                    var elems = $(".head-bigger-to-view")[0];
                    if( typeof ($(elems) ) == "undefined"){
                        return 0;
                    }
                    var t = $(elems).css("top");
                    var h = $(elems).css("height");

                    var l = $(elems).css("left");
                    var w = $(elems).css("width");

                    console.log(l+"-"+t+"=="+w+"-"+h);
                    t = t.substr(0,t.length-2);
                    h = h.substr(0,h.length-2);
                    l = l.substr(0,l.length-2);
                    w = w.substr(0,w.length-2);

                    //鼠标指针此时的位置
                    var x = e.pageX;
                    var y = e.pageY;

                    //当前窗口top位置：top - 1/2高度 - 边框
                    //当前窗口bottom位置：top + 1/2高度 + 边框
                    //当前窗口left位置：left - 1/2宽度 - 边框
                    //当前窗口right位置：left + 1/2宽度 - 边框
                    if(    x<parseFloat(l)-parseFloat(w)/2 -5
                        || x>parseFloat(l) + parseFloat(w)/2 + 5
                        || y<parseFloat(t) -parseFloat(h)/2 -5
                        || y>parseFloat(t)+parseFloat(h)/2+ 5
                    ){
                        $(elems).remove();
                    }
                });
            }
        };

    </script>
</body>
</html>